<template>
<view class="container">
  
  <uni-nav-bar title="我的收藏" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
  <view class="collect-list">
    <view v-for="(item, index) in collectList" :key="index" class="item" :data-collect="item" @tap="goDetail" @touchstart="touchStart" @touchend="touchEnd">
      <image class="img" :src="item.product.product.pic"></image>
      <view class="info">
        <view class="name">{{item.product.product.name}}</view>
        <view class="collecter"> 
          <image class="collect-img" @tap.stop="deletecollect" :data-id="item.productId" src="/static/static/images/icon_collect_checked.png"></image>
          <view class="collect-num">12</view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var app = getApp();
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      typeId: 0,
      collectList: [],
      touch_start: "",
      touch_end: ""
    };
  },

  components: {uniNavBar},
  props: {},
  onShareAppMessage: function (res) {
    return {
      title: '琅琊严选',
      path: '/pages/index/index'
    };
  },
  onLoad: function (options) {
  },
  onReady: function () {},
  onShow: function () {
    this.getCollectList();
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
	  goback:function(){
		  uni.navigateBack()
	  },
    getCollectList() {
      let that = this;
      util.request(api.CollectList).then(function (res) {
        if (res.errno == 0) {
          console.log(res.data);
          that.setData({
            collectList: res.data.records
          });
          console.log(res.data.records);
        }
      });
    },

    goDetail(event) {
      console.log(JSON.stringify(event));
      let that = this;
      let collect = event.currentTarget.dataset.collect;
      console.log(collect);
      var touchTime = that.touch_end - that.touch_start;
      console.log(touchTime); //如果按下时间大于350为长按  

      if (touchTime > 350) {
        uni.showModal({
          title: '',
          content: '要删除所收藏？',
          success: function (res) {
            if (res.confirm) {
              util.request(api.CollectAddOrDelete, {
                id: collect.product.product.id
              }, 'GET').then(function (res) {
                if (res.errno == 0) {
                  uni.showToast({
                    title: '取消收藏',
                    icon: 'success',
                    duration: 2000
                  });
                  that.getCollectList();
                }
              });
              console.log('用户点击确定');
            }
          }
        });
      } else {
        uni.navigateTo({
          url: '/pages/goods/goods?id=' + collect.product.product.id
        });
      }
    },

    deletecollect(e) {
      console.log(JSON.stringify(e));
      var that = this;
      util.request(api.CollectAddOrDelete, {
        id: e.currentTarget.dataset.id
      }, 'GET').then(function (res) {
        if (res.errno == 0) {
          uni.showToast({
            title: '取消收藏',
            icon: 'success',
            duration: 2000
          });
           that.getCollectList();
        }
      });
    },

    //按下事件开始  
    touchStart: function (e) {
      let that = this;
      that.setData({
        touch_start: e.timeStamp
      });
      console.log(e.timeStamp + '- touch-start');
    },
    //按下事件结束  
    touchEnd: function (e) {
      let that = this;
      that.setData({
        touch_end: e.timeStamp
      });
      console.log(e.timeStamp + '- touch-end');
    }
  }
};
</script>
<style>
page{
    background: #f1f1f1;
    min-height: 100%;
}

.container{
    background:  #f1f1f1;
    width: 100%;
    height: 100%;
}

.collect-list{
  background:  #f1f1f1;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-left: 30rpx;
}

.item{
  height: auto;
  width: 50%;
  display: flex;
  background:  #f1f1f1;
  flex-direction: column;
  align-items: center;
  padding-right: 28rpx;
  float: left;
}

.item:last-child{
  border-bottom: 1px solid #f1f1f1;
}

.item .img{
  width: 330rpx;
  height: 330rpx;
}

.item .info{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item .info .name{
  font-size: 26rpx;
  color: #353535;
  line-height: 28rpx;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .info .collecter{
  display: flex;
  justify-content: space-between;
  width: 100rpx;
  height: 35rpx;
  line-height: 35rpx;
  font-size: 22rpx;
}
.item .info .collecter .collect-img{
  height: 30rpx;
  width: 30rpx;
}

.item .info .collecter .collect-num{
  font-size: 22rpx;
  color: #888;
}

</style>